<template>
  <div class="mypage">
    <div class="shopgroup" v-if="cart.length === 0">
      <van-empty
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="购物车为空"
      />
    </div>
    <div class="shopgroup" v-else>
      <van-swipe-cell
        v-for="shop in cart"
        :key="`shop-${shop.id}`"
      >
        <shopCartItem
          :id="shop.id"
          :title="shop.title"
          :price="shop.price"
          :photo="shop.photo"
          :count="shop.count"
          :check="shop.check"
          :saleNum="shop.saleNum"
        />
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" @click="delShop({id: shop.id})" />
        </template>
      </van-swipe-cell>
    </div>
    <div class="cartFooter">
      <van-submit-bar :price="totalMoney * 100" button-text="提交订单" :safe-area-inset-bottom="true">
     <van-checkbox :value="isAllCheck" @click="toggleAllCheck({ isAllCheck })">全选</van-checkbox>
    </van-submit-bar>
    </div>
  </div>
</template>

<script>
import shopCartItem from '@/components/shopCartItem'
import {
  mapState,
  mapGetters,
  mapMutations
} from 'vuex'
// @ is an alias to /src
export default {
  name: 'Mypage',
  data () {
    return {
      checked: false,
      value: ''
    }
  },
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['totalMoney', 'isAllCheck'])
  },
  methods: {
    ...mapMutations(['delShop', 'toggleAllCheck'])
  },
  components: {
    shopCartItem
  }
}
</script>
<style lang="scss" scoped>
.mypage{
  height: 100%;
  display: flex;
  flex-direction:column ;
  .van-submit-bar{
   position: static;
 }
}
 .goods-card {
    margin: 0;
    background-color: white;
  }
  .delete-button {
    height: 100%;
  }
   .custom-image .van-empty__image {
    width: 90px;
    height: 90px;
  }
</style>
